<template>
  <div class="myinfo panel">
      <div class="panel-list">
          <div class="panel-item">
              <label>个人头像</label>
              <div class="form-inline form-item text-right" style="padding-right: 0;">
                  <div class="media-object"><img :src="userinfo.avatar" alt="" class="img-avtar"></div>
              </div>
          </div>
          <div class="panel-item">
              <label>昵称</label>
              <div class="form-inline form-item">
                  <input type="text" class="input-text" v-model="userinfo.nickname">
              </div>
              <i class="icon van-icon van-icon-arrow"></i>
          </div>
          <div class="panel-item">
              <label>真实姓名</label>
              <div class="form-inline form-item">
                  <input type="text" class="input-text" value="大鱼艺术教育">
              </div>
              <i class="icon van-icon van-icon-arrow"></i>
          </div>
          <div class="panel-item">
              <label>性别</label>
              <div class="form-inline form-item text-right">
                  <span @click="showPicker = 'sex'">{{userinfo.gender == 1 ? '男' : '女'}}</span>
              </div>
              <i class="icon van-icon van-icon-arrow"></i>
          </div>
          <div class="panel-item">
              <label>生日</label>
              <div class="form-inline form-item text-right">
                  <span @click="showPicker = 'birthday'">{{userInfos.birthday}}</span>
              </div>
              <i class="icon van-icon van-icon-arrow"></i>
          </div>
      </div>

        <div class="panel-list">
            <div class="panel-item">
                <label>地区</label>
                <div class="form-inline form-item text-right">
                    <span @click="showPicker = 'area'">{{userinfo.province}},{{userinfo.city}}</span>
                </div>
                <i class="icon van-icon van-icon-arrow"></i>
            </div>
            <div class="panel-item">
                <label>联系地址</label>
                <div class="form-inline form-item">
                    <input type="text" class="input-text" value="陕西北路交叉口相比50米">
                </div>
                <i class="icon van-icon van-icon-arrow"></i>
            </div>
            <div class="panel-item">
                <label>手机号码</label>
                <div class="form-inline form-item">
                    <input type="text" class="input-text" value="13888888888" maxlength="11">
                </div>
                <i class="icon van-icon van-icon-arrow"></i>
            </div>
        </div>

        <div class="panel-list-button text-center">
            退出登陆
        </div>

        <div class="button-groups text-center">
            <div class="button-groups-item">
                <button type="button" class="button-sync">同步微信信息</button>
            </div>
            <div class="button-groups-item">
                <button type="button" class="button-true">确认修改</button>
            </div>
        </div>

        <van-datetime-picker
            v-if="showPicker == 'birthday'"
            v-model="birthdayTime"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="confirmBirthday"
            @cancel="showPicker = ''"

        />
        <van-area 
            v-show="showPicker == 'area'"
            :area-list="areaList" 
            :columns-num="2" 
            :value="areaDefaultCode"
            title="请选择城市地区" 
            @confirm="confirmArea"
            @cancel="showPicker = ''"
        />

        <van-picker 
            v-if="showPicker == 'sex'"
            :columns="sexLists" 
            :default-index="sexDefaultIndex"
            @change="onSexChange" 
        />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import areaList from '@/modal/area.js';
export default {
    components: {},
    props: {},
    data() {
        return {
            showButtonGroups: false,
            showPicker: '',
            userInfos: {
                nickname: '',
                sex: '男',
                province: '安徽',
                city: '芜湖',
                address: '',
                birthday: '1990-09-08'
            },
            minDate: new Date(1900, 1, 1),
            maxDate: new Date(),
            areaList: areaList,
            sexLists: ['女', '男']  
        };
    },
    computed: {
        ...mapState({
            userinfo: state => state.userinfo
        }),
        sexDefaultIndex(){
            return this.sexLists.findIndex(item=>item == this.userInfos.sex);
        },
        areaDefaultCode(){
            let code = '';
            let cityLists = this.areaList.city_list;
            for(let index in cityLists){
                if(cityLists[index].includes(this.userInfos.city)){
                    code = index;
                    break;
                }
            }
            return code;
        },
        birthdayTime(){
            let date = this.userInfos.birthday;
            return new Date(this.userInfos.birthday)
        }
    },
    methods: {
        confirmBirthday(value){
            let dateObj = new Date(value)
            let fullYear = dateObj.getFullYear();
            let month = dateObj.getMonth() + 1;
            let date = dateObj.getDate();
            if(month < 10) month = `0${month}`;
            if(date < 10) date = `0${date}`;
            
            this.userInfos.birthday = `${fullYear}-${month}-${date}`;
            this.showPicker = '';
        },
        confirmArea(selectedArea){
            let [province, city] = selectedArea;
            console.log(`${province.code} - ${city.code}`)
            this.userinfo.province = province.name;
            this.userinfo.city = city.name;
            this.showPicker = '';
        },
        onSexChange(picker, value, index){
            this.userInfos.sex = value;
            this.showPicker = '';
        }
    },
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.myinfo {
    height: 100%;
    font-size: 28px;
    color: #999;
    

    label { color: #333; }
    .panel-list {
        padding: 0 35px;
        margin-bottom: 20px;
        background: #fff;
    }

    .panel-item {
        display: flex;
        height: 106px;
        padding-right: 40px;
        line-height: 106px;
        position: relative;
        &:after{
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #f3f3f3;
        }
    }

    .form-item {
        flex: 1;
    }

    .media-object {
        display: inline-block;
        width: 80px;
        height: 80px;
        border: 1px solid #eceded;
        vertical-align: middle;
        overflow: hidden;
        border-radius: 100%;
    }

    .input-text {
        width: 100%;
        text-align: right;
    }

    .icon {
        font-size: 32px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .panel-list-button {
        height: 90px;
        font-size: 32px;
        line-height: 90px;
        color: #1549eb;
        background-color: #fff;
    }

    .button-groups {
        display: flex;
        width: 100%;
        height: 110px;
        padding: 0 35px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #fff;
        // transition: all ease-in-out .15s;
        // transform: translate3d(0, 100%, 0);
        // &.show{
        //     transform: translate3d(0, 0, 0);
        // }

        &:before{
            content:'';
            display: block;
            width: 100%;
            height: 2px;
            background-color: #f0f0f0;
            position: absolute;
            top: 0;
            left: 0;
        }

        > .button-groups-item {
            flex: 1;
            line-height: 114px;
        }

        button{
            width: 269px;
            height: 82px;
            font-size: 32px;
            line-height: 82px;
            border-radius: 40px;
        }
        .button-sync {
            color: #a1710d;
            background-color: #fcba2e;
        }
        .button-true {
            color: #fff;
            background: #1549eb;
        }
    }
}
</style>